<!--
    头像组件
-->
<template>
    <span class="avatar-container" :style="{
        width: `${size}px`,
        height: `${size}px`,
        borderRadius: circle ? `${size}px` : 0,
        overflow: 'hidden'}">
        <img :src="value" />
        <slot></slot>
    </span>
</template>

<script lang="ts" setup>
import { getAssetsFile } from '@/assets/utils/pub-use'
import { computed } from 'vue';

const props = defineProps({
    src: {
        type: String,
        default: getAssetsFile('default-avatar.png')
    },
    size: {
        type: Number,
        default: 36,
    },
    circle: {
        type: Boolean,
        default: true,
    }
})

// 传递了空src也显示默认
const value = computed<string>(() => {
    return props.src || getAssetsFile('default-avatar.png')
})
</script>

<style scoped>
.avatar-container {
    cursor: pointer;
    display: block;
}
img {
    display: block;
    width: 100%;
}
</style>
